<template>
  <div>
    <div
      :class="[
        {
          'verticalLine-solid-divide': isSolid,
          'verticalLine-dash-divide': !isSolid,
        },
      ]"
      ref="colour"
    >
      <p id="verticalLine-line_divide--lineText">
        {{ text }}&nbsp;&nbsp;
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: "verticalLine",
  props: {
    // 判断是否是实线
    isSolid: {
      type: Boolean,
      default: true,
    },
    // 实线、虚线线颜色
    // 实
    solidLineColor: {
      type: String,
      default: "#000",
    },
    // 虚
    dashLineColor: {
      type: String,
      default: "#000",
    },
    // 从分割线上的字的上方偏移量
    divideTextTopDistance: {
      type: String,
      default: "20%",
    },
    // 字色
    fontColor: {
      type: String,
      default: "#000",
    },
    // 字体大小，自动默认12px
    // 形式：12，"12" 都行
    size: [String, Number],
    text: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    initLine() {
      // 线色
      this.colorLine();
      // 字色
      this.fontColour();
      // 距离顶部距离
      this.fontTopDistance();
      // 字大小
      this.fontSize();
    },
    // 给线颜色
    colorLine() {
      this.$refs.colour.className == "verticalLine-solid-divide"
        ? (this.$refs.colour.style.backgroundColor = this.solidLineColor)
        : (this.$refs.colour.style.borderColor = this.dashLineColor);
    },
    fontColour() {
      this.$refs.colour.children[0].style.color = this.fontColor;
    },
    fontTopDistance() {
      this.$refs.colour.children[0].style.top = this.divideTextTopDistance;
    },
    fontSize() {
      this.$refs.colour.children[0].style.fontSize = this.size + "px";
      this.$refs.colour.children[0].style.width = this.size * 1 - 3 + "px"; // 减3是为了小写字母i能够换行
    },
    // 运行警告及错误提示
    warning() {
      // 正则匹配，积累
      const percent = /^([0-9]\d{0,1}|100[%]{1}$)(\.\d{1,2})?%?$/; // 匹配0 —— 100%
      // /^([0-9]\d{0,1}|100$)(\.\d{1,2})?$/    匹配 0-100
      // /^([0-9]\d{0,1}|100[%]{0,1}$)(\.\d{1,2})?%?$/     匹配 0-100, 0%-100%，可为两位小数，%百分号可有可无
      if (!percent.test(this.divideTextTopDistance)) {
        console.error("需要匹配0——100%的百分比数，可带两位小数！");
        return false;
      }
      if (
        typeof this.size == "string" &&
        (this.size.slice(-2) == "px" || this.size.slice(-2) == "PX")
      ) {
        const PXnum = this.size.split("");
        PXnum.splice(-2);
        console.error(
          `verticalLine组件的size属性，输入数字 ${PXnum.join(
            ""
          )} 或者字符串 "${PXnum.join("")}" 即可`
        );
        return false;
      }
      if (this.size < 12 && this.size > 3) {
        console.warn("字体太小，部分浏览器会有差异，最好调整字体到12px以上！");
      } else if (this.size <= 3) {
        this.text = "";
        console.error("字体大小禁止小于或者等于3px！");
        return false;
      }
    },
  },
  mounted() {
    this.warning();
    this.initLine();
  },
};
</script>
<style lang="scss" scoped>
#verticalLine-line_divide--lineText {
  position: absolute;
  background-color: #fff;
  transform: translateX(-47%);
  // 强制换行3连
  word-break: break-all; // 只对英文有效，且不破坏单词结构，超出的时候会单词整体下移，但是如果单词本身过长，仍然不受到盒子限制冲出去
  word-wrap: break-word; // 只对英文有效，且破坏单词结构
  white-space: pre-wrap; // 只对中文有效
}
.verticalLine-solid-divide {
  height: 100%;
  width: 1px;
  margin: 0 8px;
  position: relative;
  background-color: #000;
  vertical-align: middle;
}
.verticalLine-dash-divide {
  height: 100%;
  width: 0px;
  border: 0.5px dashed #000;
  margin: 0 8px;
  position: relative;
  vertical-align: middle;
}
</style>
